<template>
    <div class="home">
      <div class="header">
        <a @click="goOutClick()"><span class="angle"></span><span>取消</span></a>
        <span>发公告</span>
        <span @click="nextStepClick()">下一步</span>
      </div>
      <div class="content">
        <div class="noticeTitle">
            <input v-model.trim="titleVal" maxlength="35" type="text" placeholder="公告标题（必填）">
        </div>
        <div class="noticeTitle">
            <input v-model.trim="authorVal" maxlength="5" type="text" placeholder="作者（选填）">
        </div>
        <div class="noticeContent needsclick" @blur="contentBoxBlur()" placeholder="公告内容" contenteditable="true">
        </div>
      </div>
      
      <!-- 提示信息 -->
      <div class="tip" v-show="isTip">
        <p>{{tipMessage}}</p>
      </div>
      <!--退出弹出框-->
      <div class="delPopup" v-show="isShowdel">
          <transition name="slide-fade">
              <div class="delContent">
                  <v-deleteBox @ok="okClick" @canle="canleClick" :name="titlenameVal"></v-deleteBox>
              </div>
          </transition>
      </div>
    </div>
</template>
<script>
import { mapActions } from "vuex";
import deleteBox from "./cModule/del";
export default {
  data() {
    return {
      tipMessage: "服务器错误", //提示信息内容
      isTip: false, //提示信息是否出现
      oid: "7274e24d5deb444fb973b7dd18d7cca2",
      uid: "aeb5e154962341438c02ab5f62601982",
      isShowdel: false, //删除提示框是否出现
      titlenameVal: "确定要放弃此次输入？", //弹出框提示文字
      contentValue: "", //公告内容
      titleVal: "" ,//公告标题
      authorVal:'',//作者
    };
  },
  components: {
    "v-deleteBox": deleteBox
  },
  created: function() {
    // self.oid = this.$route.query.oid
    // self.uid = this.$route.query.uid
    sessionStorage.removeItem('title')
    sessionStorage.removeItem('content')
    sessionStorage.removeItem('author')
    sessionStorage.removeItem('sureList')
    sessionStorage.removeItem('imgUrl')
  },
  watch: {},
  methods: {
    //   点击取消
    goOutClick(){
        this.isShowdel = true
    },
    //   点击下一步
    nextStepClick() {
      var self = this;
      if (self.contentValue.trim() == "" || self.titleVal == "") {
        self.tipMessage = "请输入公告标题和公告内容";
        self.isTip = true;
        setTimeout(() => {
          self.isTip = false;
        }, 1000);
      } else {
        this.$router.push({
          path: "/addnoticeSecond",
        });
        sessionStorage.setItem('content',self.contentValue)
        sessionStorage.setItem('title',self.titleVal)
        sessionStorage.setItem('author',self.authorVal)
      }
    },
    //   textarea失去焦点事件
    contentBoxBlur() {
        if(document.getElementsByClassName("noticeContent")[0].innerHTML == '<br>'){
            document.getElementsByClassName("noticeContent")[0].innerHTML = "";
        }
      this.contentValue = document.getElementsByClassName(
        "noticeContent"
      )[0].innerText;
    },
    // 点击确认返回
    okClick() {
      this.isShowdel = false;
      this.$router.push({
          path:'/home'
      })
    },
    canleClick() {
      this.isShowdel = false;
    },

    ...mapActions([""])
  }
};
</script>
<style scoped>
/* 删除弹框 */

.delPopup {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1000000;
  background: rgba(126, 109, 105, 0.4);
}

.delContent {
  width: 60%;
  height: 10rem;
  background-color: #fff;
  border-radius: 10px;
  margin: calc((100vh - 10rem) / 2) auto;
  z-index: 100000;
}
/* ----------- */
.tip {
  position: fixed;
  width: 21rem;
  height: 4rem;
  background: #000;
  opacity: 0.6;
  z-index: 500;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  border-radius: 0.5rem;
  line-height: 4rem;
  text-align: center;
  color: #fff;
}
.content {
  margin-top: 5rem;
}
.angle {
  border-left: 0.3rem solid #fff;
  border-bottom: 0.3rem solid #fff;
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 1.85rem;
  transform: rotate(45deg);
  float: left;
}
.header {
  height: 5rem;
  line-height: 5rem;
  color: white;
  background-color: #fd6162;
  font-weight: normal;
  position: fixed;
  top: 0;
  width: 100%;
  left: 0;
  text-align: center;
  overflow: hidden;
      z-index: 1;
}
.header a {
  float: left;
  margin-left: 1rem;
}
.header > span:nth-of-type(1) {
  font-size: 1.6rem;
}
.header > span:nth-of-type(2) {
  float: right;
  margin-right: 1rem;
}
.noticeTitle input {
  height: 80%;
  width: 100%;
  font-size: 1.5rem;
}
.noticeTitle {
  border-bottom: 1px solid #e7e7e7;
  height: 4rem;
  line-height: 4rem;
  padding: 0 1rem;
}
.noticeContent {
  width: 100%;
  min-height: 4rem;
  padding: 1rem;
  font-size: 1.5rem;
  line-height: 2.4rem;
  word-wrap: break-word;
  overflow-x: hidden;
  overflow-y: auto;
  outline: none;
  -webkit-user-select:text;
}
.noticeContent:empty:before {
  content: attr(placeholder);
  font-size: 1.5rem;
  color: #777777;
}
.noticeContent:focus:before {
  content: none;
}
</style>